<template>
  <view>
    <view class="complete_pay_info">
      <view class="content flr flb fla" @click="showDetail()">
        <view class="flr">
          <img src="@/static/img/procurement/complete_info.png" class="complete_icon" />
          <view class="content_desc_label flc">
            <text class="desc_first">{{ descFirst }}</text>
            <text class="desc_second">{{ descSecond }}</text>
          </view>
        </view>
        <view class="flr fla">
          <text class="desc_thid">去完善</text>
          <img src="@/static/img/procurement/to_right.png" class="to_right" />
        </view>
      </view>
    </view>
    <uni-popup ref="complete" type="bottom" :class="{ 'popup-complete': zIndexClass }" background-color="#fff" border-radius="20rem 20rem 0 0">
      <view class="complete-conten-box">
        <view class="content-header flb">
          <text class="cancel-text" @click="closePopup()">取消</text>
          <text class="center-text flex1">{{ title }}</text>
          <text class="cancel-text confirm-text" @click="confirmPopup()">确定</text>
        </view>
        <view class="content-line"></view>
        <scroll-view :style="formContentStyle" scroll-y>
          <view v-for="(item, key) in commonData[targetType]" :key="key" style="padding: 13rem 25rem 0 25rem">
            <view class="content-title">{{ item.label }}</view>
            <view v-for="(itm, idx) in item.list" :key="idx" @click="setParams(item.value, itm.value)" :class="{ 'inline-box': true, 'inline-active': commitParams[item.value] === itm.value }">{{ itm.label }}</view>
          </view>
          <UploadFile v-if="targetType < 2" uploadFileType="img" title="图片" :picsUrl="commitParams.picsUrl" :limit="3" @setFileInfo="setFileInfo" />
          <view v-if="targetType < 2" class="content_line"></view>
          <UploadFile v-if="targetType < 2" uploadFileType="file" title="文件" :fileUrl="commitParams.fileUrl" :fileName="commitParams.fileName" @setFileInfo="setFileInfo" />
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import UploadFile from '@/component/UploadFile.vue';
import commonMxins from '@/mixins/common.js';
export default {
  mixins: [commonMxins],
  components: {
    UploadFile
  },
  props: {
    descFirst: {
      type: String,
      default: '完善结款方式，联系上限'
    },
    descSecond: {
      type: String,
      default: '补充信息，更快成交'
    },
    // 0-采购 1-销售 2-我的完善信息
    targetType: {
      type: Number,
      default: 0
    },
    // 1-打开完善信息弹窗 2- 跳转页面
    showPopupOrjumpToPage: {
      type: Number,
      default: 1
    },
    params: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: '完善发布信息'
    }
  },
  onLoad() {},
  data() {
    return {
      zIndexClass: false,
      formContentStyle: '',
      commitParams: {},
      commonData: [
        [
          {
            label: '结算方式',
            value: 'settlementMethod',
            list: [
              { label: '现金', value: '1' },
              { label: '月结', value: '2' }
            ]
          },
          {
            label: '需求数量',
            value: 'demandQty',
            list: [
              { label: '样品', value: '1' },
              { label: '小批次', value: '2' },
              { label: '量产', value: '3' }
            ]
          },
          {
            label: '供应资质',
            value: 'supplyQualification',
            list: [
              { label: '代理', value: '1' },
              { label: '原厂', value: '2' }
            ]
          },
          {
            label: '联系上限',
            value: 'contactLimit',
            list: [
              { label: '3人', value: '3' },
              { label: '5人', value: '5' },
              { label: '7人', value: '7' }
            ]
          }
        ],
        [
          {
            label: '供应资质',
            value: 'supplyQualification',
            list: [
              { label: '无', value: '3' },
              { label: '代理', value: '1' },
              { label: '原厂', value: '2' }
            ]
          },
          {
            label: '从业时间',
            value: 'businessTime',
            list: [
              { label: '3年以下', value: '1' },
              { label: '3-8年', value: '2' },
              { label: '8年以上', value: '3' }
            ]
          },
          {
            label: '结算方式',
            value: 'settlementMethod',
            list: [
              { label: '现金', value: '1' },
              { label: '月结', value: '2' }
            ]
          },
          {
            label: '联系上限',
            value: 'contactLimit',
            list: [
              { label: '3人', value: '3' },
              { label: '5人', value: '5' },
              { label: '7人', value: '7' },
              { label: '10人', value: '10' }
            ]
          }
        ],
        [
          {
            label: '职务',
            value: 'duty',
            list: [
              { label: '采购总监', value: '1' },
              { label: '采购负责', value: '2' },
              { label: '开发采购', value: '3' },
              { label: '销售总监', value: '4' },
              { label: '销售负责', value: '5' }
            ]
          },
          {
            label: '企业性质',
            value: 'nature',
            list: [
              { label: '上市公司', value: '1' },
              { label: '央企', value: '2' },
              { label: '民企(制造)', value: '3' },
              { label: '民企(代理)', value: '4' }
            ]
          },
          {
            label: '年采购额',
            value: 'yearAmount',
            list: [
              { label: '1亿以上', value: '1' },
              { label: '1000万-1亿', value: '2' },
              { label: '1000万以下', value: '3' }
            ]
          }
        ]
      ]
    };
  },
  methods: {
    setFileInfo(value) {
      if (typeof value === 'object') {
        this.commitParams.fileUrl = value.url;
        this.commitParams.fileName = value.fileName;
      } else {
        this.commitParams.picsUrl = value;
      }
    },
    initData() {
      this.formContentStyle = `height:${580 * this.globalData.pageHeightProportion}rem;margin-bottom:${120 * this.globalData.pageHeightProportion}rem;`;
      this.commitParams = { ...this.params };
    },
    setParams(key, value) {
      this.commitParams[key] = value;
    },
    // 展示详情
    showDetail() {
      if (this.showPopupOrjumpToPage === 2) {
        uni.navigateTo({ url: '/pages/my/enhanceInfo' });
      } else {
        this.zIndexClass = true;
        this.$refs.complete.open('bottom');
        this.initData();
      }
    },
    closePopup() {
      this.zIndexClass = false;
      this.$refs.complete.close();
    },
    confirmPopup() {
      this.$emit('setCompleteInfo', this.commitParams);
      this.zIndexClass = false;
      this.$refs.complete.close();
    }
  }
};
</script>

<style lang="scss" scoped>
.popup-complete {
  /deep/ .uni-popup {
    z-index: 998 !important;
  }
}
.complete_icon {
  width: 26rem;
  height: 28rem;
  margin-right: 6rem;
}
.complete_pay_info {
  width: 400rem;
  height: 50rem;
  padding: 10rem 14rem;

  .content {
    overflow: hidden;
    padding: 10rem 18rem;
    border-radius: 50rem;
    border: 1rem solid rgba(255, 124, 0, 1);
    background: rgba(252, 234, 215, 1);

    .content_desc_label {
      font-size: 12rem;
      line-height: 15rem;
      color: rgba(56, 56, 56, 1);
      text-align: left;
    }

    .desc_first {
      font-weight: 700;
    }

    .desc_second {
      font-weight: 400;
    }

    .desc_thid {
      font-size: 16rem;
      font-weight: 700;
      letter-spacing: 0rem;
      line-height: 30rem;
      color: rgba(255, 124, 0, 1);
      margin-right: 10rem;
      text-align: left;
    }

    .to_right {
      width: 10.83rem;
      height: 15rem;
    }
  }
}
// 完善信息弹窗
.complete-conten-box {
  box-sizing: border-box;
  border-radius: 20rem 20rem 0 0;
  width: 430rem;
  background: rgba(255, 255, 255, 1);
  border-top: 1rem solid rgba(128, 128, 128, 1);
  .content-header {
    height: 70rem;
    padding: 0 25rem;
    .cancel-text {
      font-size: 18rem;
      font-weight: 400;
      line-height: 70rem;
      color: rgba(128, 128, 128, 1);
      text-align: left;
    }
    .center-text {
      font-size: 20rem;
      font-weight: 700;
      line-height: 70rem;
      color: rgba(56, 56, 56, 1);
      text-align: center;
    }
    .confirm-text {
      color: rgba(255, 124, 0, 1);
    }
  }
  .content-line {
    margin: 0 14rem;
    width: 402rem;
    height: 0;
    border-bottom: 0.5rem solid rgba(166, 166, 166, 1);
  }
  .content-title {
    font-size: 16rem;
    font-weight: 500;
    line-height: 23.17rem;
    color: rgba(56, 56, 56, 1);
    text-align: left;
  }
  .inline-box {
    display: inline-block;
    height: 26rem;
    border-radius: 3rem;
    background: rgba(252, 234, 215, 1);
    font-size: 14rem;
    line-height: 26rem;
    color: rgba(56, 56, 56, 1);
    border: 1rem solid rgba(252, 234, 215, 1);
    text-align: center;
    padding: 0 16rem;
    margin: 10rem 17rem 14rem 0;
  }
  .inline-active {
    color: rgba(255, 118, 17, 1);
    border: 1rem solid rgba(255, 124, 0, 1);
  }
}
</style>
